<template>
  <view class="relative-position">
    <image :src="detail.thumb" mode="widthFix" class="origin-img"></image>
    <view class="padding-10">
      <u-form :model="infoForm" :labelWidth="80">
        <u-form-item label="通话人" prop="manName">
          <view>
            <image :src="infoForm.manName" v-if="infoForm.manName" class="upimg"></image>
            <view class="upload-btn" @click="chooseImg">
              <u-icon name="plus" size="30px" color="#FFC107"></u-icon>
            </view>
          </view>
        </u-form-item>

        <u-button text="立即生成" color="#FFC107" @click="onSaveData" class="margin-top-10"></u-button>
      </u-form>
    </view>
    <view class="cropper-con" v-if="wxSrc">
     <div class="ccon">
       <bt-cropper ref="cropper" :ratio="30/53" :d-width="80" :imageSrc="wxSrc" fileType="jpg"></bt-cropper>
     </div>
      <view class="flex-between-vertical btn-pc">
        <view class="cancel-btn" @click="wxSrc=''">取消</view>
        <view class="sure-btn" @click="onSure">裁剪</view>
      </view>
    </view>
    <l-painter :board="poster" isCanvasToTempFilePath @success="getImg($event)" hidden/>
    <video-a-d/>

  </view>
</template>

<script>
import {
  base64ToPath
} from 'image-tools';
import Loading from '../../components/loading';
import BtCropper from "../../uni_modules/bt-cropper/components/bt-cropper/bt-cropper";
import UImage from "../../uni_modules/uview-ui/components/u--image/u--image";

export default {
  components: {
    UImage,
    BtCropper,
    Loading,
  },
  data() {
    return {
      isInters: true,
      poster: {},
      infoForm: {
        manName: '',
        profName: '',
      },
      showPop: false,
      imgUrl: '',
      detail: {},
      wxSrc: "",
    };
  },
  mounted() {
  },
  methods: {
    async chooseImg() {
      const res = await uni.chooseImage();
      let url = res[1].tempFilePaths[0]
      //   2.10.0使用，暂时不用
      /*   const res = await uni.chooseMedia({mediaType:"image",count:1});
         let url = res[1].tempFiles[0].tempFilePath*/
      this.wxSrc = url
    },
    onSure() {

      const vm = this
      this.$refs.cropper.crop().then(async (path) => {
        console.log(" --------  ", path)
        vm.wxSrc = ""
        this.infoForm.manName = path
      })

    },
    onSaveData() {
      if (!this.infoForm.manName) {
        this.$util.showToast('请填写完整信息');
        return;
      }
      this.$util.showLoading('生成中，请耐心等待');
      this.showIntersAD();
      this.poster = {
        css: {
          width: '750rpx',
          position: 'relative',
        },
        views: [{
          type: 'image',
          src: this.detail.img,
          css: {
            width: '100%',
            minHeight: '200rpx',
          },
        }, {
          type: 'image',
          src: this.infoForm.manName,
          css: {
            minHeight: '200rpx',
            "width": "228rpx",
            position: "absolute",
            right: "16rpx",
            top: "20rpx",
          },
        },

        ],
      };

      // poster=posterData
    },

  },
};
</script>

<style lang="scss" scoped>
.origin-img {
  width: 100%;
  display: block;
  min-width: 100px;
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100rpx;
  height: 100rpx;
  border: 2rpx dashed $uni-color-primary;  vertical-align: middle;
}

.upimg {
  width: 100rpx;
  height: 100rpx;
  margin-right: 20rpx;
  display: inline-block;
  vertical-align: middle;
}

.cropper-con {
  height: calc(100vh - 0px);
  width: 100vw;
  position: fixed;
  z-index: 10;
  background-color: rgba(0,0,0,0.5);
  top: 0;
}
.ccon{
  height: calc(100vh - 60px);
}

.btn-pc {
  position: absolute;
  bottom: 30px;
  width: 100%;
}

.cancel-btn, .sure-btn {
  background: linear-gradient(-90deg, #ffef10 0%, #ffc421 100%);
  padding: 20rpx;
  border-radius: 30px;
  color: white;
  text-align: center;
  flex: 1;
  margin: 10px;
}

.sure-btn {
  background: linear-gradient(-90deg, #0088FF 0%, #0088FF 100%);

}
</style>
